<template>
    <div>
        <Swiper></Swiper>
        <div class="position_box">
            <div class="hot_box">
                <div>
                    
                    <img src="@/assets/girdIcon/爱心.png" @click="$router.push($path.Sign)" />签到
                </div>
                <div>
                    <img src="@/assets/girdIcon/吊灯.png" />礼券
                </div>
                <div>
                    <img src="@/assets/girdIcon/皇冠.png" />砍价
                </div>
                <div>
                    <img src="@/assets/girdIcon/星星.png" />专栏
                </div>
            </div>
        </div>
        <div>
            <h3>
                <router-link to="/kPriceShopList">
                    全民砍价
                    <van-icon name="arrow" />
                </router-link>
            </h3>
            <van-card
                v-for="item in showKpriceShop"
                :key="item.id"
                v-show="item.originalPrice<400"
                :price="item.originalPrice"
                :desc="item.characteristic"
                :title="item.name"
                :thumb="item.pic"
            />
        </div>
        <div>
            <h3>
                <router-link to="/goodNews">精选专题<van-icon name="arrow" /></router-link>
            </h3>
            <News></News>
        </div>
        <div class="good">
            <h3>
                <router-link to="/recommend">人气推荐<van-icon name="arrow" /></router-link>
            </h3>
            <ul class="recommend">
                <li
                    v-for="(item,index) in recommend"
                    :key="index"
                    v-show="7<index&&index<12"
                    @click="gotoDetail(item.id)"
                >
                    <img :src="item.pic" />
                    <p>{{item.name}}</p>
                    <p>
                        <span>￥:</span>
                        {{item.originalPrice}}
                    </p>
                </li>
            </ul>
        </div>
    </div>
</template>

<script>
import Swiper from "../../components/index/Swiper"; //引入轮播图组件
import News from "../home/strickNews/news"; //引入文章组件
export default {
    components: {
        Swiper,
        News,
    },
    data() {
        return {
            showKpriceShop: [],
            recommend: [],
        };
    },
    methods: {
        gotoDetail(id) {
            this.$router.push({
                path: this.$path.goodShopDetail,
                query: { id: id },
            });
        },
    },
    mounted() {
        this.$API.getKPriceShop().then((res) => {
            // console.log(res.data.data.goodsMap);
            this.showKpriceShop = res.data.data.goodsMap;
        });
        this.$API.getGoodShop().then((res) => {
            console.log(res.data.data);
            this.recommend = res.data.data;
        });
    },
};
</script>

<style lang="scss">
.position_box {
    width: 100%;
    height: 12vh;
    background: rgba($color: #ffff, $alpha: 0.3);
    position: absolute;
    top: 38vh;
    left: 0;
    .hot_box {
        width: 100%;
        height: 13vh;
        display: flex;
        justify-content: space-around;
        align-items: center;
        flex-wrap: wrap;
        img {
            width: 70%;
            height: 60%;
        }
    }
}
h3 {
    height: 40px;
    margin: 1vh 0;
    display: flex;
    align-items: center;
    justify-content: center;
    i{
        vertical-align: middle;
    }
}
.good {
    margin-bottom: 10vh;
}
.recommend {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    li {
        width: 48%;
        height: 40vh;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        img {
            width: 90%;
            height: 76%;
        }
        p{
            width: 100%;
            font-size: 12px;
        }
        span {
            color: red;
        }
    }
}
</style>